<!--
 * @Author: zcl
 * @Date: 2024-10-09 14:41:17
 * @LastEditors: 张辰龙 zhangchenlong@julimeng.com
 * @LastEditTime: 2025-06-18 14:18:20
 * @FilePath: /ssnewapp/pageHome/company/components/InvoiceMsg.vue
-->
<template>
  <view>
    <div class="scrollBox">
      <view>
        <view class="row text">
          <view class="w70">近45天是否有开票记录：</view>
          <text class="w30">{{ queryOptions.matchStep == 0 ? '-' : detalInfo1.billingRecords ? "是" : "否" }}</text>
        </view>
        <view class="row text1">
          <view class="w70">近30天开票金额(元)：</view>
          <text class="w30">{{ queryOptions.matchStep == 0 ? '-' : $p(detalInfo1.billingDaysSum) }}</text>
        </view>

        <view class="row text">
          <view class="w70">近12月作废发票数量占比：</view>
          <text class="w30">{{ queryOptions.matchStep == 0 ? '-' : detalInfo1.taxVoidRateMonth12 ?
            `${detalInfo1.taxVoidRateMonth12}%` : '-' }}</text>
        </view>
        <view class="row text1">
          <view class="w70">近12月最长连续断票月数：</view>
          <text class="w30">{{ queryOptions.matchStep == 0 ? '-' : detalInfo1.breakMonthsSum12 != '' ||
            detalInfo1.breakMonthsSum12 != null ? `${detalInfo1.breakMonthsSum12}` : '-' }}</text>
        </view>

        <view class="row text">
          <view class="w70">近12个月断票月数：</view>
          <text class="w30">{{ queryOptions.matchStep == 0 ? '-' : detalInfo1.breakMonthsSum ?
            `${detalInfo1.breakMonthsSum}` : '-' }}</text>
        </view>
        <view class="row text1">
          <view class="w70" style="width: 80%">近12个月月均开票金额同比增长率：</view>
          <text class="w30">{{ queryOptions.matchStep == 0 ? '-' : detalInfo1.taxAmountGrowthRateMonth12 ?
            `${detalInfo1.taxAmountGrowthRateMonth12}%` : '-' }}</text>
        </view>
        <view class="row text">
          <view class="w70" style="width: 80%">近12个月最大连续未开票间隔天数(销项)：</view>
          <text class="w30">{{ queryOptions.matchStep == 0 ? '-' : detalInfo1.taxOutputNotInvoicedMonth12 ?
            detalInfo1.taxOutputNotInvoicedMonth12 : '-' }}</text>
        </view>
      </view>
      <!--开票对比分析-->
      <view class="uni-card cardContent" :class="comparative ? 'cardShadow' : ''">
        <view class="row title " :class="comparative ? 'paddingL15' : ''">
          <view class="row" style="justify-content: flex-start">
            <text class="leftLine"></text>
            <text class="titleName">开票对比分析</text>
          </view>
          <view v-if="comparative" @click="showDemoData('taxAny')" class="row"
            style="justify-content: flex-start;margin-top: 20rpx">
            <view style="color: #999999">展示样例信息</view>
            <view style="margin-left: 8rpx;padding-top: 4rpx">
              <image :src="require('../../static/yangli.png')" style="width: 30rpx;height: 26rpx"></image>
            </view>
          </view>
          <view v-if="taxAnyType">左滑查看更多</view>
        </view>

        <view v-if="!comparative">
          <view class="comparStyle" v-if="enterpriseMonthApplyList.length > 0">
            <tableData :tableType="'column'" :tableData="enterpriseMonthApplyList" :col-width="'38'">
              <view style="display: flex" class="data-row" v-for="(item, index) in enterpriseMonthApplyList"
                :key="index">
                <view :style="{
                  width: 100 / enterpriseMonthApplyList.length + '%',
                  padding: index == 0 ? '28rpx 12rpx' : '',
                  background: index == 0 ? '#F1F5F9' : ''
                }" class="data-cell" v-for="(v, i) in comparativeTitle.length - 1" :key="i">
                  <view style="white-space: nowrap" v-if="item.month == '开票金额'">{{ $p(item['price' + (i + 1)]) }}</view>
                  <view style="white-space: nowrap"
                    v-else-if="['开票环比增长率', '开票同比增长率', '红冲发票张数占比', '红冲金额占比'].includes(item.month)">{{ item['price' + (i +
                      1)] ?
                      item['price' + (i + 1)] + '%' : '-' }}</view>
                  <view style="white-space: nowrap" v-else>{{ item['price' + (i + 1)] }}</view>
                </view>
              </view>
            </tableData>
          </view>
          <view v-else style="
              text-align: center;
              line-height: 100rpx;
              height: 100rpx;
              font-size: 26rpx;
              color: #888888;
            "> 暂无数据 </view>
        </view>
        <view v-else class="row paddingL15">
          <view style="font-size: 30rpx;">{{ tableText }}</view>
          <view class="goGetTable" @click="toGetTableClick">去获取</view>
        </view>
      </view>
      <!--近三年开票总金额-->
      <!-- <view class="uni-card cardContent" :class="oneType ? 'cardShadow' : ''">
        <view class="row title" :class="oneType ? 'paddingL15' : ''">
          <view class="row" style="justify-content: flex-start">
            <text class="leftLine"></text>
            <text class="titleName">近三年开票总金额</text>
          </view>
          <view v-if="oneType" @click="showDemoData('taxAny')" class="row" style="justify-content: flex-start;margin-top: 20rpx">
            <view style="color: #999999">展示样例信息</view>
            <view style="margin-left: 8rpx;padding-top: 4rpx">
              <image :src="require('../../static/yangli.png')" style="width: 30rpx;height: 26rpx"></image>
            </view>
          </view>
        </view>

        
        <view v-if="!oneType">
          <qiun-data-charts
              type="area"
              :canvas2d="true"
              :opts="opts"
              :chartData="chartData"
          />
        </view>
        <view v-else class="row paddingL15">
          <view>{{ tableText }}</view>
          <view class="goGetTable" @click="toGetTableClick">去获取</view>
        </view>
      </view> -->
      <!--近三年开票金额 -->
      <view class="uni-card cardContent" :class="threeType ? 'cardShadow' : ''">
        <view class="row title" :class="threeType ? 'paddingL15' : ''">
          <view class="row" style="justify-content: flex-start">
            <text class="leftLine"></text>
            <text class="titleName">近三年开票总金额</text>
          </view>
          <view v-if="threeType" @click="showDemoData('taxAny')" class="row"
            style="justify-content: flex-start;margin-top: 20rpx">
            <view style="color: #999999">展示样例信息</view>
            <view style="margin-left: 8rpx;padding-top: 4rpx">
              <image :src="require('../../static/yangli.png')" style="width: 30rpx;height: 26rpx"></image>
            </view>
          </view>
        </view>
        <view v-if="!threeType">
          <tableData :tableTitleData="tableTitleData1">
            <view style="display: flex" class="data-row" v-for="(item, index) in invoiceInfoDataList" :key="index">
              <view :style="{ width: 100 / tableTitleData1.length + '%' }" class="data-cell">{{ item.month }}</view>
              <view :style="{ width: 100 / tableTitleData1.length + '%' }" class="data-cell"
                v-for="(v, i) in tableTitleData1.length - 1" :key="i">{{ $p(item["price" + (i + 1)]) }}</view>
            </view>
            <view v-if="JSON.stringify(invoiceInfoDataList) == '[]'" style="
              text-align: center;
              line-height: 100rpx;
              height: 100rpx;
              font-size: 26rpx;
              color: #888888;
            ">
              暂无数据
            </view>
          </tableData>
        </view>
        <view v-else class="row paddingL15">
          <view>{{ tableText }}</view>
          <view class="goGetTable" @click="toGetTableClick">去获取</view>
        </view>
      </view>
      <!--近三年无票收入-->
      <view class="uni-card cardContent" :class="noInvoiceType ? 'cardShadow' : ''">
        <view class="row title" :class="threeType ? 'paddingL15' : ''">
          <view class="row" style="justify-content: flex-start">
            <text class="leftLine"></text>
            <text class="titleName">近三年无票收入</text>
          </view>
          <view v-if="noInvoiceType" @click="showDemoData('taxAny')" class="row"
            style="justify-content: flex-start;margin-top: 20rpx">
            <view style="color: #999999">展示样例信息</view>
            <view style="margin-left: 8rpx;padding-top: 4rpx">
              <image :src="require('../../static/yangli.png')" style="width: 30rpx;height: 26rpx"></image>
            </view>
          </view>
        </view>
        <view v-if="!noInvoiceType">
          <tableData :tableTitleData="tableTitleData6">
            <view style="display: flex" class="data-row" v-for="(item, index) in applySalesDataList" :key="index">
              <view :style="{ width: 100 / tableTitleData6.length + '%' }" class="data-cell">{{ item.month }}</view>
              <view :style="{ width: 100 / tableTitleData6.length + '%' }" class="data-cell"
                v-for="(v, i) in tableTitleData6.length - 1" :key="i">{{ $p(item["price" + (i + 1)]) }}</view>
            </view>
          </tableData>
        </view>
        <view v-else class="row paddingL15">
          <view>{{ tableText }}</view>
          <view class="goGetTable" @click="toGetTableClick">去获取</view>
        </view>
      </view>
      <!-- 红冲金额 -->
      <view class="uni-card cardContent" :class="fourType ? 'cardShadow' : ''">
        <view class="row title" :class="fourType ? 'paddingL15' : ''">

          <view class="row" style="justify-content: flex-start">
            <text class="leftLine"></text>
            <text class="titleName">红冲金额</text>
          </view>
          <view v-if="fourType" @click="showDemoData('taxAny')" class="row"
            style="justify-content: flex-start;margin-top: 20rpx">
            <view style="color: #999999">展示样例信息</view>
            <view style="margin-left: 8rpx;padding-top: 4rpx">
              <image :src="require('../../static/yangli.png')" style="width: 30rpx;height: 26rpx"></image>
            </view>
          </view>
        </view>
        <view v-if="!fourType">
          <view v-if="redInvoiceInfoDataList.length > 0">
            <tableData :tableTitleData="tableTitleData2">
              <view style="display: flex" class="data-row" v-for="(item, index) in redInvoiceInfoDataList" :key="index">
                <view :style="{ width: 100 / tableTitleData2.length + '%' }" class="data-cell">{{ item.month }}</view>
                <view :style="{ width: 100 / tableTitleData2.length + '%' }" class="data-cell"
                  v-for="(v, i) in tableTitleData2.length - 1" :key="i">{{ $p(item["price" + (i + 1)]) }}</view>
              </view>
            </tableData>
          </view>
          <view v-else style="
              text-align: center;
              line-height: 100rpx;
              height: 100rpx;
              font-size: 26rpx;
              color: #888888;
            "> 暂无数据 </view>
        </view>
        <view v-else class="row paddingL15">
          <view>{{ tableText }}</view>
          <view class="goGetTable" @click="toGetTableClick">去获取</view>
        </view>
      </view>
      <!-- 作废金额 -->
      <view class="uni-card cardContent" :class="fiveType ? 'cardShadow' : ''">
        <view class="row title" :class="fiveType ? 'paddingL15' : ''">

          <view class="row" style="justify-content: flex-start">
            <text class="leftLine"></text>
            <text class="titleName">作废金额</text>
          </view>
          <view v-if="fiveType" @click="showDemoData('taxAny')" class="row"
            style="justify-content: flex-start;margin-top: 20rpx">
            <view style="color: #999999">展示样例信息</view>
            <view style="margin-left: 8rpx;padding-top: 4rpx">
              <image :src="require('../../static/yangli.png')" style="width: 30rpx;height: 26rpx"></image>
            </view>
          </view>
        </view>
        <view v-if="!fiveType">
          <view v-if="invoiceCountDataList.length > 0">
            <tableData :tableTitleData="tableTitleData3">
              <view style="display: flex" class="data-row" v-for="(item, index) in invoiceCountDataList" :key="index">
                <view :style="{ width: 100 / tableTitleData3.length + '%' }" class="data-cell">{{ item.month }}</view>
                <view :style="{ width: 100 / tableTitleData3.length + '%' }" class="data-cell"
                  v-for="(v, i) in tableTitleData3.length - 1" :key="i">{{ $p(item["price" + (i + 1)]) }}</view>
              </view>
            </tableData>
          </view>
          <view v-else style="
              text-align: center;
              line-height: 100rpx;
              height: 100rpx;
              font-size: 26rpx;
              color: #888888;
            ">
            暂无数据
          </view>
        </view>
        <view v-else class="row paddingL15">
          <view>{{ tableText }}</view>
          <view class="goGetTable" @click="toGetTableClick">去获取</view>
        </view>
      </view>
      <!-- 前十供应商信息 -->
      <view class="uni-card cardContent" :class="sixType ? 'cardShadow' : ''">
        <view class="row title" :class="sixType ? 'paddingL15' : ''">
          <view class="row" style="justify-content: flex-start">
            <text class="leftLine"></text>
            <text class="titleName">前十供应商信息</text>
          </view>
          <view v-if="sixType" @click="showDemoData('taxAny')" class="row"
            style="justify-content: flex-start;margin-top: 20rpx">
            <view style="color: #999999">展示样例信息</view>
            <view style="margin-left: 8rpx;padding-top: 4rpx">
              <image :src="require('../../static/yangli.png')" style="width: 30rpx;height: 26rpx"></image>
            </view>
          </view>
        </view>
        <view v-if="!sixType">
          <view class="tenCustom" v-if="detalInfo2.paidTaxesDataList && detalInfo2.paidTaxesDataList.length > 0">
            <tableData :tableTitleData="tableTitleData7">
              <view style="display: flex" class="data-row" v-for="(item, index) in detalInfo2.paidTaxesDataList"
                :key="index">
                <view :style="{ width: 100 / tableTitleData7.length + '%' }" class="data-cell">{{ item.sort }}</view>
                <view :style="{ width: 100 / tableTitleData7.length + '%' }" class="data-cell">
                  <readMore title="供应商名称" :isPopup="true" hideLineNum="2" showHeight="50">{{ item.buySaleName &&
                    item.buySaleName }}
                    <template #content>
                      <view>{{ item.buySaleName }}</view>
                    </template>
                  </readMore>
                </view>

                <view :style="{ width: 100 / tableTitleData7.length + '%' }" class="data-cell">{{ $p(item.sumAmount) }}
                </view>
                <view :style="{ width: 100 / tableTitleData7.length + '%' }" class="data-cell">{{ item.amountRate }}
                </view>
                <view :style="{ width: 100 / tableTitleData7.length + '%' }" class="data-cell">{{ item.relatedStatus ?
                  "是" : "否" }}</view>
              </view>
            </tableData>
          </view>
          <view v-else style="
              text-align: center;
              line-height: 100rpx;
              height: 100rpx;
              font-size: 26rpx;
              color: #888888;
            ">
            暂无数据
          </view>
        </view>
        <view v-else class="row paddingL15">
          <view>{{ tableText }}</view>
          <view class="goGetTable" @click="toGetTableClick">去获取</view>
        </view>
      </view>
      <!-- 前十销售客户信息 -->
      <view class="uni-card cardContent" :class="sevenType ? 'cardShadow' : ''">
        <view class="row title" :class="sevenType ? 'paddingL15' : ''">

          <view class="row" style="justify-content: flex-start">
            <text class="leftLine"></text>
            <text class="titleName">前十销售客户信息</text>
          </view>
          <view v-if="sevenType" @click="showDemoData('taxAny')" class="row"
            style="justify-content: flex-start;margin-top: 20rpx">
            <view style="color: #999999">展示样例信息</view>
            <view style="margin-left: 8rpx;padding-top: 4rpx">
              <image :src="require('../../static/yangli.png')" style="width: 30rpx;height: 26rpx"></image>
            </view>
          </view>
        </view>
        <view v-if="!sevenType">
          <view class="tenCustomTwo"
            v-if="detalInfo2.redInvoiceInfoDataList && detalInfo2.redInvoiceInfoDataList.length > 0">
            <tableData :tableTitleData="tableTitleData5">
              <view style="display: flex" class="data-row" v-for="(item, index) in detalInfo2.redInvoiceInfoDataList"
                :key="index">
                <view :style="{ width: 100 / tableTitleData5.length + '%' }" class="data-cell">{{ item.sort }}</view>
                <view :style="{ width: 100 / tableTitleData5.length + '%' }" class="data-cell">
                  <readMore title="供应商名称" :isPopup="true" hideLineNum="2" showHeight="50">{{ item.buySaleName &&
                    item.buySaleName }}
                    <template #content>
                      <view>{{ item.buySaleName }}</view>
                    </template>
                  </readMore>
                </view>

                <view :style="{ width: 100 / tableTitleData7.length + '%' }" class="data-cell">{{ $p(item.sumAmount) }}
                </view>
                <view :style="{ width: 100 / tableTitleData7.length + '%' }" class="data-cell">{{ item.amountRate }}
                </view>
                <view :style="{ width: 100 / tableTitleData7.length + '%' }" class="data-cell">{{ item.relatedStatus ?
                  "是" : "否" }}</view>
              </view>
            </tableData>
          </view>
          <view v-else style="
              text-align: center;
              line-height: 100rpx;
              height: 100rpx;
              font-size: 26rpx;
              color: #888888;
            ">
            暂无数据
          </view>
        </view>
        <view v-else class="row paddingL15">
          <view>{{ tableText }}</view>
          <view class="goGetTable" @click="toGetTableClick">去获取</view>
        </view>
      </view>
    </div>
    <loading :show="loading"></loading>
    <table-dialog ref="tabDia"></table-dialog>
  </view>
</template>

<script>
import { getTaxAmountApi, getEnterpriseInvoiceTopTen, getMatchInfoInfo } from "@/api/product";
import { opts } from "../../options";
import tableData from "@/components/tableData.vue";
import readMore from "@/components/xzj-readMore.vue";
import tableDialog from "../../components/tableDialog/index";
export default {
  components: { tableData, readMore, tableDialog },
  props: {
    queryOptions: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      tableText: '补充税票信息，一键获取详细数据',
      loading: false,
      detalInfo1: {},
      detalInfo2: {},
      comparative: true, //
      oneType: true, //近三年纳税信息展开收起控制
      threeType: true, //近三年开票金额展开收起控制
      noInvoiceType: true,
      fourType: true,
      fiveType: true,
      sixType: true,
      sevenType: true,
      chartData: {},
      opts,
      tableTitleData1: [{ title: "月份" }], //近三年开票金额表头
      tableTitleData2: [{ title: "月份" }], //近三年开票金额表头
      tableTitleData3: [{ title: "月份" }], // 作废金额
      tableTitleData7: [
        { title: "排名" },
        { title: "供应商名称" },
        { title: "采购额(元)" },
        { title: "金额占比(%)" },
        { title: "是否关联方" },
      ], //前十供应商信息
      tableTitleData5: [
        { title: "排名" },
        { title: "客户名称" },
        { title: "销售额(元)" },
        { title: "金额占比(%)" },
        { title: "是否关联方" },
      ], //销售客户信息
      tableTitleData6: [{ title: "月份" }], //近三年无票收入
      comparativeTitle: [{ title: '开票对比分析' }],
      invoiceInfoDataList: [], //近三年开票金额数据
      redInvoiceInfoDataList: [], //红冲金额
      invoiceCountDataList: [], //作废数据
      applySalesDataList: [], //近三年无票收入
      enterpriseMonthApplyList: [], //开票对比分析
      debounceTimer: null
    };
  },
  mounted() {
    if (this.queryOptions.matchStep != 0) {
      this.getInfo();
      this.comparative = false
      this.oneType = false
      this.threeType = false
      this.noInvoiceType = false
      this.fourType = false
      this.fiveType = false
      this.sixType = false
      this.sevenType = false
    } else {
      this.comparative = true
      this.oneType = true
      this.threeType = true
      this.noInvoiceType = true
      this.fourType = true
      this.fiveType = true
      this.sixType = true
      this.sevenType = true
    }
  },
  methods: {
    getInfo() {
      // uni.showLoading();
      this.loading = true
      const p1 = getTaxAmountApi(this.queryOptions.id);
      const p2 = getEnterpriseInvoiceTopTen(this.queryOptions.id);
      Promise.all([p1, p2]).then(async (res) => {
        console.log(res);
        this.detalInfo1 = res[0].data;
        this.detalInfo2 = res[1].data;

        this.detalInfo1.enterpriseMonthApplyList.forEach(item => {
          this.comparativeTitle.push({ title: `近${item.month}个月` })
          this.$set(item, 'monthData', [])
          item.monthData.push(
            {
              name: '开票金额',
              value: item.taxEnterpriseApplyDate.invoiceAmount
            },
            {
              name: '开票环比增长率',
              value: item.taxEnterpriseApplyDate.invoiceGrowthRate
            },
            {
              name: '开票同比增长率',
              value: item.taxEnterpriseApplyDate.invoiceOverGrowthRate
            },
            {
              name: '开票张数',
              value: item.taxEnterpriseApplyDate.invoiceCount
            },
            {
              name: '开票月数',
              value: item.taxEnterpriseApplyDate.invoiceMonthsNum
            },
            {
              name: '断票月数',
              value: item.taxEnterpriseApplyDate.breakMonthsSum
            },
            {
              name: '红冲发票张数占比',
              value: item.taxEnterpriseApplyDate.invoiceRedCountRate
            },
            {
              name: '红冲金额占比',
              value: item.taxEnterpriseApplyDate.invoiceRedAmountRate
            },
            {
              name: '上游客户数量',
              value: item.taxEnterpriseApplyDate.customerUpNum
            },
            {
              name: '下游客户数量',
              value: item.taxEnterpriseApplyDate.customerDownNum
            },
            // {
            //   name: '无票收入',
            //   value: item.taxEnterpriseApplyDate.salesRevenueAmount
            // },
          )
        })
        this.enterpriseMonthApplyList = this.$util.transformData(this.detalInfo1.enterpriseMonthApplyList, 'F')
        this.enterpriseMonthApplyList.unshift({})
        this.detalInfo1.enterpriseMonthApplyList.forEach((item, i) => {
          this.enterpriseMonthApplyList[0].month = '开票对比分析'
          this.enterpriseMonthApplyList[0][`price${i + 1}`] = `近${item.month}个月`
        });
        //处理p1
        await this.getServerData(); //处理统计图
        //处理金额
        const dataArr = [
          "invoiceInfoDataList",
          "redInvoiceInfoDataList",
          "invoiceCountDataList",
          "applySalesDataList"
        ];
        dataArr.forEach(async (v, idx) => {
          await this.threeYearInvo(v, idx + 1);
        });
        //处理p2
        // this.loading = false
        // uni.hideLoading();
      }).finally(() => {
        this.loading = false
        // uni.hideLoading();
      })

    },
    // 展示样例数据
    showDemoData(val) {
      // 待产品提供图片
      this.$refs.tabDia.open('invoice')
    },
    toGetTableClick() {
      if (this.debounceTimer) {
        clearTimeout(this.debounceTimer);
        this.debounceTimer = null;
      }
      // 设置新的计时器（500毫秒防抖）
      this.debounceTimer = setTimeout(() => {
        this.linkPage();
        this.debounceTimer = null;
      }, 500);
    },
    linkPage() {
      getMatchInfoInfo({
        id: this.queryOptions.id,
        type: this.queryOptions.type
      }).then(res => {
        let params = {
          tax: res.data.creditCode,
          companyName: res.data.enterpriseName,
          matchType: this.queryOptions.type,
          age: res.data.ageScope,
          phoneNumber: res.data?.phoneNumber,
          role: res.data.personStand,
          provinceId: res.data.areaId,
          matchStep: this.queryOptions.matchStep + ''
        };
        console.log("params", params)
        // return
        let url = Object.keys(params).reduce((pre, cur) => {
          return pre + (params[cur] ? `&${cur}=${params[cur]}` : "");
        }, "");

        uni.navigateTo({
          url: `/pagesProduct/addCampanyData/index?${url.substring(
            1,
            url.length
          )}`,
        });
      })
    },
    //添加合计
    addTableSum(table) {
      table &&
        table.forEach((item) => {
          item.monthData.push({
            name: "合计",
            type: 0,
            value: item.total || 0,
          });
        });
      return this.$util.transformData(table);
    },
    //统一处理
    threeYearInvo(v, idx) {
      if (idx == 4) {
        this.tableTitleData6 = [
          ...this.tableTitleData6,
          ...this.detalInfo1.applySalesDataList.map((item) => {
            return {
              title: item.year,
            };
          }),
        ];
        this.detalInfo1.applySalesDataList.forEach(item => {
          if (item.monthData.length < 12) {
            item.monthData.push({
              name: item.monthData.length + (12 - item.monthData.length)
            })
          }
        })
        this.applySalesDataList = this.addTableSum(this.detalInfo1.applySalesDataList);
      } else {
        this["tableTitleData" + idx] = [
          ...this["tableTitleData" + idx],
          ...this.detalInfo1[v].map((item) => {
            return {
              title: item.year,
            };
          }),
        ];
      }
      this.detalInfo1[v].forEach(item => {
        if (item.monthData.length < 12) {
          item.monthData.push({
            name: item.monthData.length + (12 - item.monthData.length)
          })
        }
      })
      this[v] = this.addTableSum(this.detalInfo1[v]);
    },
    getServerData() {
      //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
      let res = {
        categories: [
          "01",
          "02",
          "03",
          "04",
          "05",
          "06",
          "07",
          "08",
          "09",
          "10",
          "11",
          "12",
        ],
        dataLabel: false,
        series: [],
      };
      this.detalInfo1.invoiceInfoDataList &&
        this.detalInfo1.invoiceInfoDataList.forEach((item) => {
          res.series.push({
            legendShape: "rect",
            name: `${item.year}年`,
            showPoint: false,
            showSymbol: false,
            point: { show: false },
            data: item.monthData.map((v) => v.value),
          });
        });
      console.log("res", res);
      setTimeout(() => {
        this.chartData = JSON.parse(JSON.stringify(res));
      }, 2000);
    },
  },
};
</script>

<style lang="scss" scoped>
.scrollBox {
  // height: calc(100vh - 500rpx);
  // overflow-y: scroll;
}

.w70 {
  width: 80%;
  text-align: left;
  font-size: 28rpx;
  white-space: nowrap;
  color: #999999;
}

.w30 {
  width: 20%;
  text-align: left;
  font-size: 28rpx;
  white-space: nowrap;
}

.marginL16 {
  margin-left: 16rpx;
}

.cardContent {
  box-shadow: none;
  //padding-top: 20rpx;
  //padding-bottom: 20rpx;
  border-radius: 0 0 15rpx 15rpx;
  margin-top: 0;
}

.title {
  //background: #f3f3f3;
  padding-top: 10rpx;
  padding-bottom: 10rpx;
  margin: 10rpx 0;
}

.itemTitle {
  background: #f9f9f9;
  color: #a8a8a8;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
  padding: 10rpx 16rpx;
}

.text {
  background: #F6F9F8;
  padding: 20rpx;
  font-size: 28rpx;
}

.text1 {
  padding: 20rpx;
  font-size: 28rpx;
}

/deep/ .title-item {
  padding: 24rpx 12rpx;
  color: #222;
  font-weight: bold;
  font-size: 28rpx;
  background-color: #fff;
}

.tenCustom,
.tenCustomTwo {
  /deep/ .title-item {
    font-size: 24rpx;
  }
}

/deep/ .data-cell:last-child {
  border-right: none;
}

/deep/ .xzj {
  color: #222222 !important;
}

/deep/ .watchMore {
  margin-top: 0;
  font-size: 24rpx;
  color: rgb(72, 138, 253) !important;
}

.data-cell {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  //padding: 20rpx 12rpx; /* 将像素单位换成 rpx */
  border-right: 1rpx solid #ccc;
  /* 将像素单位换成 rpx */
  border-bottom: 1rpx solid #ccc;
  /* 将像素单位换成 rpx */
  word-break: break-all;
  word-wrap: break-word;
  color: #333333;
  font-size: 26rpx;
  line-height: 48rpx;
  /* 根据需要调整行高，单位为 rpx */
  background-color: #fff;
  // z-index: 10;
}

/deep/ .uni-popup {
  z-index: 99999;
}

/deep/ .table-container {
  border-radius: 20rpx;
  overflow: hidden;
}

.comparStyle {
  /deep/ .table-container {
    //width: 180%;
  }

  /deep/ .data-row {
    &:first-child {
      .data-cell {
        background: #F1F5F9;
        font-weight: 500;
      }
    }
  }
}

/deep/ .title-item {
  background: #F1F5F9;
}

/deep/ .data-cell {
  padding: 20rpx 12rpx;
}

.cardShadow {
  padding-top: 10rpx;
  padding-bottom: 30rpx;
  box-shadow: 0rpx 0rpx 6rpx 4rpx rgba(246, 251, 255, 1) !important;
  margin-top: 30rpx !important;
}

.leftLine {
  width: 6rpx;
  height: 30rpx;
  background: #FA7700;
  margin-right: 8rpx;
}

.titleName {
  font-weight: 600;
  font-size: 34rpx;
}

.goGetTable {
  width: 180rpx;
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  background: #2872FD;
  color: #FFFFFF;
  border-radius: 8rpx;
  font-weight: 600;
}
</style>
